<template>
<div class="system-upgrade views-container">
    <el-dialog :visible.sync="dialogVisibleImg" @close="clearData" width="35%" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="flex-col flex-justify-c flex-align-c" style="padding:10px 50px;">
            <img src="@/assets/login/update.png" alt="" style="width:50%">
            <!-- {{this.nowUpdateFile}}---{{this.allUpdateFile}}///{{$percentage}}
            {{this.sqlNowUpdateFile}}---{{this.sqlAllUpdateFile}}///{{$sqlPercentage}} -->
            <el-progress v-if="showPercentage&&$percentage>0" style="margin:30px 0;width:100%;height:30px;" :text-inside="true" :stroke-width="26" :percentage="$percentage"></el-progress>
            <el-progress v-if="showSqlPercentage&&$sqlPercentage>0" style="margin:30px 0;width:100%;height:30px;" :text-inside="true" :stroke-width="26" :percentage="$sqlPercentage"></el-progress>
            <span v-if="allUpdateFile/nowUpdateFile!=1" style="margin-bottom:40px;">系统正在为您做最后处理，请耐心等待~~~</span>
            <span v-if="showSqlPercentage">数据更新中，请耐心等待~~~</span>
        </div>
    </el-dialog>
    <!-- 弹窗用户信息 -->
    <!-- @close="saveDialogForm" -->
    <el-dialog  :visible.sync="dialogVisibleWechat" custom-class="reset-pwd wlm-form-dialog dialog-table">
      <div class="wlm-form" v-if="dialogVisibleWechat">
              <div class="wlm-form-header wlm-dialog-fixheader">
                  <span class="wlm-dialog-inlenr">更新回滚列表</span>
              </div>
      </div>
     <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main" style="padding:0 16px 16px 16px;">
                       <div style=" color: #999;
    line-height: 14px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: normal;">1.回滚后数据不会受到任何影响</div>
                        <div style=" color: #999;
    line-height: 14px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: normal;margin-bottom:10px;">2.回滚操作需要10秒左右的时间，请勿中断请求</div>
                        <div class="wlm-dialog-content">
                            <el-table :data="tablebtn">
                                <el-table-column property="date" label="版本号" >
                                      <template slot-scope="scope">
                                        <!-- <i class="el-icon-folder-opened"></i> -->
                                          {{scope.row.version}}
                                      </template>
                                </el-table-column>
                                <el-table-column property="name" label="备份时间">
                                       <template slot-scope="scope">
                                         {{scope.row.create_time*1000 | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
                                       </template>
                                </el-table-column>
                                <el-table-column property="address" label="操作">
                                   <template slot-scope="scope">
                                     <div class="operation-group">
                                      <el-button type="text" @click="rollback(scope.row)">回滚</el-button>
                                      <el-button type="text" @click="delback(scope.row)">删除</el-button>
                                     </div>
                                   </template>
                                </el-table-column>
                              </el-table>
                        </div>
                    
                    </div>
                </div>
     </el-scrollbar>
   <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" @click="dialogVisibleWechat=false" type="danger">关闭</el-button>
        </footer>
</el-dialog>
    <div class="upgrade-body flex-col flex-align-c"  v-loading="loading">
        <!-- v-loading="mainLoing" -->
        <span class="hidebtn" @click="hideclick">1</span>
        <img v-if="categoryData.upVersionStatus==0" src="@/assets/cloudservice/chenggong.png" height="180" width="230" alt="">
        <img v-if="categoryData.upVersionStatus==1" src="@/assets/cloudservice/gengxin.png" height="180" width="230" alt="">
        <p v-if="categoryData.upVersionStatus==1" class="main-title">有新的系统版本更新，是否更新？</p>
        <p v-if="categoryData.upVersionStatus==0" class="main-title">恭喜您，当前系统版本是最新版本！</p>
        <div><span>当前版本：</span>
            <el-tag>{{categoryData.my_version}}</el-tag><span style="margin-left:20px;">最近更新时间：{{categoryData.update_time}}</span>
        </div>
        <div style="display:flex;">
            <div>
            <el-button v-if="categoryData.upVersionStatus==0" type="primary" style="margin:30px 0;" @click="updateNow">立即检查新版本</el-button>
            <el-button v-if="categoryData.upVersionStatus==1" type="primary" style="margin:30px 0;" @click="updateNow">立即更新</el-button>
          </div>
             <el-button type="info" style="margin:30px 20px; " plain @click="backupsbtn">备份当前版本</el-button>

            <el-button type="info" style="margin:30px 5px; " plain @click="withdrawbtn();dialogVisibleWechat = true;">回滚版本</el-button>
        </div>
        <div class="new-text">
            <p class="title"><span class="f-600">最新版本：</span><span class="orders-blue">{{categoryData.server_version}}</span><span class="f-600" style="margin-left:20px;">发布时间：{{updataData.updated_at*1000 | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span></p>
            <div v-html="updataData.content"></div>
        </div>
    </div>
</div>
</template>

<script>
import {
  synchronizationSql,
  upVersion,
  getUpdateServerFileAll,
  updateFile,
  sqlSynchronization,
  querySql,
  updateLog,
  getBackupsLists,
  backups,
  versionRollBack,
  delBackups
} from '@/api/cloudservice'
import {
  getPlanTaskData
} from '@/api/setting'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'SystemUpgrade',
  components: {

  },
  computed: {
    $percentage() {
      let num = (Number(this.nowUpdateFile) / Number(this.allUpdateFile)) * 100
      num = +num.toFixed(2)
      // num=parseInt(num*100)/100;
      if (num > 100) {
        num = 100
      }
      this.$forceUpdate()
      return num
    },
    $sqlPercentage() {
      let num = (Number(this.sqlNowUpdateFile) / Number(this.sqlAllUpdateFile)) * 100
      num = Number(num.toFixed(2))
      if (num > 100) {
        num = 100
      }
      this.$forceUpdate()
      return num
    }
  },
  created() {
    upVersion().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.categoryData = msgData
    })
    updateLog().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.updataData = msgData
      console.log(msgData)
    })
  },
  data() {
    return {
      loading: false,
      tablebtn:[],
      updataData: [],
      showPercentage: false,
      showSqlPercentage: false,
      allUpdateFile: 0,
      nowUpdateFile: 0,
      sqlAllUpdateFile: 0,
      sqlNowUpdateFile: 0,
      dialogVisibleImg: false,
      dialogVisibleWechat:false,
      categoryData: [],
      formFormatData: {
        key: 'userForm',
        api: {
          submitForm: 'userAdd'
        },
        formData: {
          real_name: ''
        },
        rules: {
        }
      },
     
    }
  },
  methods: {
    //弹窗
     open() {
        this.$confirm('未配置计划任务，请前往配置?', '提示', {
          confirmButtonText: '确定',
          showClose:false,
          closeOnClickModal:false,
          showCancelButton:false,
          type: 'warning'
        }).then(() => {
          // this.$router.push({path:'/setting/planningtasks'})
          this.$router.push('/setting/planningtasks');
        })
      },
    backupsbtn(){
      
       this.$confirm('确定要备份此版本吗?备份过程中，请勿刷新页面或中途退出', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                 this.loading = true
                  backups().then(res=>{
                  const { data: { code, data, msg } } = res
                      if (code === 1) {
                      this.$message.success(msg)
                      this.loading=false
                    
                    } else {
                      this.$message.error(msg)
                      this.loading=false

                    }
                  })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });          
              });
    },
    withdrawbtn(){
      getBackupsLists().then(res=>{
        this.tablebtn = res.data.data
      })
    },
    rollback(scope){

              this.$confirm('确定要回滚到此版本?回滚过程中，请勿刷新页面或中途退出', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.dialogVisibleWechat=false
                this.loading = true
                  versionRollBack({zip_path:scope.file_name}).then(res=>{
                    const { data: { code, data, msg } } = res
                          if (code === 1) {
                            this.$message.success(msg)
                            // this.dialogVisibleWechat=false
                            this.loading=false
                          } else {
                            this.$message.error(msg)
                            this.loading=false
                          }
                          })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });          
              });
    },
    delback(scope){
              this.$confirm('确定要删除此版本?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                // this.dialogVisibleWechat=false
                  delBackups({zip_path:scope.file_name}).then(res=>{
                    const { data: { code, data, msg } } = res
                          if (code === 1) {
                            this.$message.success(msg)
                            // this.dialogVisibleWechat=false
                            this.withdrawbtn()
                          } else {
                            this.$message.error(msg)
                          }
                          })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });          
              });
    },
    clearData() {
      this.showPercentage = false
      this.showSqlPercentage = false
      this.allUpdateFile = 0
      this.nowUpdateFile = 0
      this.sqlAllUpdateFile = 0
      this.sqlNowUpdateFile = 0
    },
    updateNow() {
      this.setpA()
      this.dialogVisibleImg = true
    },
    setpA() {
      getUpdateServerFileAll().then((res) => {
        const { code, data } = res.data
        if (code === 1) {
          this.setpB()
          this.showPercentage = true
          this.allUpdateFile = data
          
        } else {
          // this.mainLoing = false
        }
      })
    },
    setpB() {
      updateFile().then((res) => {
        const { data: { code, data } } = res
        this.nowUpdateFile = this.nowUpdateFile + 1
        console.log(this.nowUpdateFile, 'this.nowUpdateFile')
        if (data) {
          this.setpB()
        } else {
          this.setpC()
        }
       
      })
    },
    setpC() {
      sqlSynchronization().then((res) => {
        const { code, data } = res.data
        if (code === 1) {
          this.setpD()
          this.sqlAllUpdateFile = data
          this.showPercentage = false
          this.showSqlPercentage = true
        } else {
          // this.mainLoing = false
        }
      })
    },
    setpD() {
      querySql().then((res) => {
        const { data: { code, data } } = res
        this.sqlNowUpdateFile = this.sqlNowUpdateFile + 1
        if (data) {
          this.setpD()
        } else {
          // this.mainLoing = false
          this.$message({
            message: '更新成功',
            showClose: true,
            duration: 0,
            type: 'success'
          })
          
          getPlanTaskData().then(item=>{
            if(item.data.data[0]==false){
              this.open()
            }
          })
          this.dialogVisibleImg = false
           
        }
      })
    },
    hideclick() {
      synchronizationSql().then((res) => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.system-upgrade {
    font-size: 14px;

    .hidebtn {
        cursor: pointer;
        opacity: 0;
        position: absolute;
        right: -5px;
        top: -5px;
    }

    .upgrade-body {
        position: relative;
        background: #ffffff;
        padding: 130px 0 40px 0;

        .main-title {
            font-size: 28px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            margin: 11px 0 18px;
        }

        .tag {
            width: 38px;
            height: 20px;
            background: rgba(51, 136, 255, 0.4);
            border-radius: 2px;
        }

        .new-text {
            background: rgba(248, 248, 248, 1);
            border-radius: 10px;
            padding: 30px;

            .title {
                margin-bottom: 15px;
            }

            .f-600 {
                font-weight: 600;
            }
        }
    }
}
</style>
